<template>
  <div class="header">
    <div class="w">
      <h4 align="center">注册</h4>
      <br>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
            <el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios'
import qs from 'qs'
export default {
    name:'RegistLh',
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
 
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
 
		return {
			activeName: 'second',
			ruleForm: {
				name: '',
				pass: '',
				checkPass: ''
			},
			rules: {
				name: [{ required: true, message: '请输入您的名称', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }],
				pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
				checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				
				if (valid) {
					console.log(this.ruleForm.name+"=========="+this.ruleForm.pass)
					var user = {
						password:this.ruleForm.pass,
						name:this.ruleForm.name
					}
					console.log(user)
					
					axios.post(`http://localhost:8088/register`,
						qs.stringify({
							'name':this.ruleForm.name,
							'password':this.ruleForm.pass
						})
					).then(response=>{
						if(response.data){
							this.$message({
								type: 'success',
								message: '注册成功'
							});
							window.sessionStorage.setItem('user',JSON.stringify(response.data))
							console.log(JSON.parse(sessionStorage.getItem('user')).id)
							location.replace("http://localhost:8080/")
							//this.$router.push("/");
						}else{
							this.$message({
								type:'error',
								message:'注册失败'
							})
						}
					})
					
					// this.activeName: 'first',
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
<style lang="css" scoped>
.header{
  width: 83vw;
  padding: 0;
  margin: 0;
  /* height: 105vh; */
  height: 100%;
  font-size: 18px;
  background-position:inherit;
  background-color: rgb(10, 158, 133);
  color: #fff;
  font-family: "Source Sans Pro";
  position: absolute;
}
.w {
  position:absolute;
  top: 25%;
  left: 32%;
  border: 1px solid #DCDFE6;
  width: 340px;
  height: 310px;
  margin: 0px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  /* background: linear-gradient(
      230deg,
      rgba(50, 60, 33, 43) 0%,
      rgb(0, 0, 0) 100%
  ); */
  background: linear-gradient(to top, rgb(0, 255, 136), 5%, pink);
}
</style>